<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 17:51:39
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\markRaw\App.vue
-->
<script setup lang="ts">
import { markRaw, reactive } from "vue"

const obj = {
  name: '前端印象',
  age: 22
}
// 通过markRaw标记原始数据obj, 使其数据更新不再被追踪
const raw = markRaw(obj) 

// 试图用reactive包装raw, 使其变成响应式数据
const state = reactive(raw)

const change = () => {
  state.age = 90  //修改了数据，但页面不响应
  console.log(state); //{name: '前端印象', age: 90, __v_skip: true}
}
</script>

<template>
  <h3>markRaw</h3>
  <h5>
    作用：将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据。 不追踪数据，可以修改数据，页面也不会修改
  </h5>
  <ul>
    <li>{{state.name}}</li>
    <li>{{state.age}}</li>
  </ul>
  <button @click="change">改变</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
